<template>
    <div class="">
        <el-card>
            <el-table :data="leaveList" style="width: 100%">
                <el-table-column label="序号" type="index" width="80">
                </el-table-column>
                <el-table-column label="名字" prop="name" width="100"></el-table-column>
                <el-table-column label="请假原因" prop="reason" width="100"></el-table-column>
                <el-table-column label="部门" prop="departmentname" width="80"></el-table-column>
                <el-table-column label="时间" prop="timevalue1" width="180"></el-table-column>
                <el-table-column label="描述" prop="Causedescription" width="280"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button @click="delleaveinfo(scope.row)" type="danger">删除</el-button>
                        <el-button @click="approve(scope.row)" v-if="scope.row.leavestatus" type="info">点击审批</el-button>
                        <el-button v-if="!scope.row.leavestatus" type="success">审批通过</el-button>
                        <i v-if="!scope.row.leavestatus" class="el-icon-check"></i>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum" :page-sizes="[2, 3, 5, 10]" :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="queryInfo.total">
            </el-pagination>
        </el-card>
    </div>
</template>
  
<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";
import { updateleaveinfo2, delleaveinfo2 } from "@/api/sys";
import { findleaveinfo } from '../api/sys';


// 请假的列表信息
const leaveList = ref([])

// 获取请假申请
// 初始写法
// const getLeaveList = () => {
//     showleaveinfo().then((res) => {
//         console.log("请假申请", res);
//         leaveList.value = res.data
//     })
// }

// 获取请假列表  + 分页
const queryInfo = ref({ query: '', pagenum: 1, pagesize: 5, total: 10 })
const getLeaveList = () => {
    findleaveinfo(queryInfo.value).then((res) => {
        leaveList.value = res.list;
        queryInfo.value.total = res.total
    })
}
const handleSizeChange = (e) => {
    queryInfo.value.pagesize = e
    getLeaveList()
}
const handleCurrentChange = (e) => {
    queryInfo.value.pagenum = e
    getLeaveList(); //重新获取数据
}

onMounted(() => {
    getLeaveList()
})

// 删除请假信息
const delleaveinfo = (row) => {
    console.log('row_id', row._id);
    ElMessageBox.confirm("是否删除请假信息?", "Warning", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        delleaveinfo2(row._id).then((res) => {
            if (res.info == 'success') {
                getLeaveList()
            }
        })
    }).catch(() => {
        ElMessage({
            type: "info",
            message: "Delete canceled",
        });
    });
}

// 通过审批
const approve = (obj) => {
    ElMessageBox.confirm("将会通过员工得申请请求. Continue?", "审批管理", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success",
    }).then(() => {
        ElMessage({
            type: "success",
            message: "同意申请"
        })
        updateleaveinfo2(obj).then((res) => {
            getLeaveList();
            console.log('最新数据', res);
        })
    }).catch(() => {
        ElMessage({
            type: "info",
            message: "忽略"
        })
    })

}
</script>
  
<style lang="scss" scoped></style>